<template>
  <el-dialog
    title="添加反馈"
    width="620px"
    :visible="visible"
    :close-on-click-modal="false"
    @update:visible="$emit('update:visible', $event)"
    @close="closeHandle"
  >
    <div class="add-record">
      <el-form
        ref="form"
        size="mini"
        :model="form"
        :rules="rules"
        label-suffix="："
        label-position="top"
      >
        <el-form-item
          class="bold"
          label="录入小组"
          prop="input_group"
        >
          <el-select
            size="small"
            v-model="form.input_group"
            placeholder="请选择"
          >
            <el-option
              v-for="item in groupOpts.slice(1)"
              :key="item.group_id"
              :label="item.group_name"
              :value="item.group_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="bold"
          label="当前使用版本"
          prop="version"
        >
        <version-select ref="versionSelect"
          :selOptions="versionOpts"
          v-model="form.version"
          :disabled="form.versionDisabled"
          @change="reRender"
          allow-create
          :multiple="false"></version-select>
        </el-form-item>
        <el-form-item
          class="bold"
          label="反馈问题或建议"
          prop="content"
        >
          <el-input
            type="textarea"
            rows="5"
            maxlength="500"
            v-model="form.content"
            placeholder="请输入内容： 1.意见反馈 2.宝贵建议 3.心愿清单 ..."
          >
          </el-input>
        </el-form-item>
        <el-form-item label="（上传附件 | 最多支持3个5M以下的内容）">
          <el-upload
            class="upload-wrap"
            action=""
            :limit="3"
            accept="image/*"
            :file-list="fileList"
            :auto-upload="false"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :on-change="handleChange"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item
          size="small"
          label="联系方式"
          prop="contact"
          class="bold"
        >
          <el-input
            v-model="form.contact"
            placeholder="请输入联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item class="tar">
          <el-button
            type="primary"
            size="medium"
            :loading="btnLoading"
            @click="submit"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script type="text/javascript">
import { addFb } from '@/api/feedback/index'
export default {
  name: 'AddRecord',
  components: {},
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    projectId: {
      required: true
    },
    versionOpts: {
      type: Array,
      required: true
    },
    groupOpts: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      form: {
        version: '',
        versionDisabled: false,
        content: '',
        contact: '',
        input_group: ''
      },
      btnLoading: false,
      fileList: [],
      rules: {
        input_group: [
          { required: true, message: '请选择录入小组', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入反馈内容', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleChange (file, fileList) {
      const {
        raw: { type, size }
      } = file
      if (!type.startsWith('image')) {
        fileList.pop()
        this.$message.warning('只能上传图片哦！')
      } else if (size > 5 * 1024 * 1024) {
        fileList.pop()
        this.$message.warning('图片不能大于5M！')
      }
      this.fileList = fileList
    },
    handleExceed () {
      this.$message.warning('最多上传三个图片！')
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.btnLoading = true
        const {
          pcid,
          brand_model: brandModel,
          winver_number: winverNumber,
          desktop_layout: desktopLayout,
          OSBuildNumber,
          OSBuildNumberUBR
        } = this.$route.query
        const formdata = new FormData()
        formdata.append('appid', this.projectId)

        formdata.append('os', '')
        formdata.append('content', this.form.content)
        formdata.append('contact', this.form.contact)
        formdata.append('version', this.form.version.replace(/v/gi, ''))
        formdata.append('come_from', 1)
        formdata.append('input_group', this.form.input_group)
        let winVersion = winverNumber
        if (OSBuildNumber) {
          winVersion = OSBuildNumber
          if (OSBuildNumberUBR) {
            winVersion += `.${OSBuildNumberUBR}`
          }
        }
        pcid && formdata.append('pcid', pcid)
        brandModel && formdata.append('brand_model', brandModel)
        winVersion && formdata.append('winver_number', winVersion)
        desktopLayout && formdata.append('desktop_layout', desktopLayout)
        for (const item of this.fileList) {
          if (item) {
            formdata.append('image', item.raw, item.name)
          }
        }
        addFb(formdata)
          .then(res => {
            if (res.code === 200) {
              this.btnLoading = false
              this.resetForm()
              this.$message.success('反馈成功！')
              this.updated = true
              this.closeHandle()
            }
          })
          .catch(() => {
            this.btnLoading = false
          })
      })
    },
    resetForm () {
      this.fileList = []
      this.form.content = ''
      this.form.contact = ''
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    closeHandle () {
      this.resetForm()
      if (this.updated) {
        this.updated = false
        this.$emit('update')
        this.$emit('update:visible', false)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.add-record {
  margin-top: -20px;

  .el-form-item {
    margin-bottom: 20px;

    /* &.bold {
      /deep/ .el-form-item__label {
        font-weight: bold;
      }
    } */

    /deep/ .el-form-item__label {
      font-size: 16px;
      line-height: 19px;
    }

    .el-select {
      width: 440px;
    }
  }

  .upload-wrap {
    /deep/ .el-upload {
      width: 128px;
      height: 128px;
      line-height: 128px;
      border-radius: 8px;
      border: 1px solid #e4e4e4;
    }

    /deep/ .el-upload-list__item {
      width: 128px;
      height: 128px;
      margin-right: 20px;
      margin-bottom: 0;
    }
  }
}
</style>
